import React, { Component } from 'react';
import LayoutContentWrapper from '@iso/components/utility/layoutWrapper';
import LayoutContent from '@iso/components/utility/layoutContent';
import axios from "../../../../http";
import Card from "../../../UIElements/Card/Card.styles";



import Input, { Textarea } from '@iso/components/uielements/input';
import Qs from 'qs'
import message from '@iso/components/Feedback/Message';
import MessageContent from "../../../Feedback/Message/Message.styles";
import {
    DateCell,
    ImageCell,
    LinkCell,
    TextCell,
} from '@iso/components/Tables/HelperCells';

import TableWrapper from "../../../Tables/AntTables/AntTables.styles";
import {Col,Row, Space} from "antd";
import PageHeader from '@iso/components/utility/pageHeader';

import {InputGroup} from "../../../../components/uielements/input";

import {Link} from "react-router-dom";
import Button from '@iso/components/uielements/button';


export default class UserReport extends React.Component {


    constructor(props) {

        super(props);

        this.state={dataList:[],modalVisible:false,q_departmentName:'',q_name:'',q_realName:'',q_email:''};
    }

     renderCell = (object, type, key) => {
        const value = object[key];
        switch (type) {
            case 'ImageCell':
                return ImageCell(value);
            case 'DateCell':
                return DateCell(value);
            case 'LinkCell':
                return LinkCell(value);
            default:
                return TextCell(value);
        }
    };


    onRecordChange = (event, key) => {
        let state={};
        state[key]=event.target.value;
        this.setState(state)
    };
    loadData=(page)=>{
        axios.post('api/core/access/user/findBasicInfoByPage', Qs.stringify({
            page: page-1,
            size: 10,
            name:this.state.q_name,
            realName:this.state.q_realName,
            departmentName:this.state.q_departmentName,
            email:this.state.q_email
        }),{headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
            .then((response)=>{

                let  data=response.data

                let  dataList=data.data.content;

                let totalElements=data.data.totalElements;

                this.setState({dataList:dataList,totalElements:totalElements});
            })
            .catch(function (error) {
                console.log(error);
            });

    }

   componentDidMount() {

        this.loadData(1)
   }
    handleViewCancel = () => {
        this.setState({modalViewVisible:false})
    };
   showSuccessMessage (systemMessage){
        message.success(
            <MessageContent>
                {systemMessage}
            </MessageContent>,
            5
        );
    };
    showErrorMessage (systemMessage){
        message.error(
            <MessageContent>
                {systemMessage}
            </MessageContent>,
            5
        );
    };


    getColumns(){
        const columns = [ {
            title: 'ID',
            key: 'id',
            width: 100,
            render: object => this.renderCell(object, 'TextCell', 'id'),
        },{
            title: '用户名',
            key: 'name',
            width: 100,
            render: object => this.renderCell(object, 'TextCell', 'name'),
        },{
            title: '姓名',
            key: 'realName',
            width: 100,
            render: object => this.renderCell(object, 'TextCell', 'realName'),
        },{
            title: '联系电话',
            key: 'phone',
            width: 100,
            render: object => this.renderCell(object, 'TextCell', 'phone'),
        },{
            title: '电子邮箱',
            key: 'email',
            width: 100,
            render: object => this.renderCell(object, 'TextCell', 'email'),
        },{
            title: '角色',
            key: 'roles',
            width: 100,
            render: object => this.renderCell(object, 'TextCell', 'roles'),
        },{
            title: '所属机构',
            key: 'departmentName',
            width: 100,
            render: object => this.renderCell(object, 'TextCell', 'departmentName'),
        },{
            title: '创建时间',
            key: 'createTime',
            width: 100,
            render: object => this.renderCell(object, 'TextCell', 'createTime'),
        },{
            title: '操作',
            width: 100,
            render:(text,record) => (
            <Space size="middle">
                <Link to={{pathname:'/main/oa/work/report/detail/'+record.id+'/'+record.realName,state:{prePageUrl:'/main/oa/work/report/user',dataUrl:'api/oa/work/report/findAllById'}}} >
                    <Button type="primary" size='small'>查看报告</Button></Link>
            </Space>
            )
        }];

        const sortColumns = [
            { ...columns[0], sorter: false },
            { ...columns[1], sorter: false },
            { ...columns[2], sorter: false },
            { ...columns[3], sorter: false },
            { ...columns[4], sorter: false },
            { ...columns[6], sorter: false },
            { ...columns[8], sorter: false }
        ];
        return sortColumns;
    }

    getPagination(){
      let pagination= {
        showSizeChanger: false,//设置每页显示数据条数
        showQuickJumper: false,
        showTotal: () => `共${this.state.totalElements}条`,
        pageSize: 10,
          //数据的总的条数
        total: this.state.totalElements,
          //点击当前页码
        onChange: (current) => this.loadData(current),
          //设置每页显示数据条数，current表示当前页码，pageSize表示每页展示数据条数
        onShowSizeChange: (current, pageSize) => {
            console.log(pageSize);
            //this.onShowSizeChange(current, pageSize)
        }

     }
     return pagination;
    }






    render() {
    return (
      <LayoutContentWrapper >
          <PageHeader>
              用户报告
          </PageHeader>
        <LayoutContent>

            <Card
                title='查询条件'
                style={{ width: '100%' }}
            >

                <InputGroup size="large" style={{ marginBottom: '15px' }}>
                    <Row gutter={8}>
                        <Col span={3}>
                            <Input placeholder='机构' onChange={e => this.onRecordChange(e, 'q_departmentName')} />
                        </Col>
                        <Col span={3}>
                            <Input  placeholder='用户名' onChange={e => this.onRecordChange(e, 'q_name')} />
                        </Col>
                        <Col span={3}>
                            <Input placeholder='姓名' onChange={e => this.onRecordChange(e, 'q_realName')} />
                        </Col>
                        <Col span={3}>
                            <Input placeholder='邮箱' onChange={e => this.onRecordChange(e, 'q_email')} />
                        </Col>
                        <Col span={3}>
                            <a href='javascript:void(0)' key='button_query' onClick={()=>{this.loadData(1)}}>
                                查询
                            </a>
                        </Col>
                    </Row>
                </InputGroup>


            </Card>

            <Card
                title='用户列表'
                style={{ width: '100%' }}
            >

                <TableWrapper
                    columns={this.getColumns()}
                    dataSource={this.state.dataList}
                    className="isoSortingTable"
                    pagination={this.getPagination()}

                />

            </Card>



        </LayoutContent>
      </LayoutContentWrapper>
    );
  }
}
